<template>
    <div class="content flex-col">
        <div class="tenant-header flex-row">
            <div class="tenant-header-left">
                密钥管理
            </div>
            <div class="tenant-header-right">
                <a-button type="primary" @click="handleAdd">
                    <a-icon type="plus" />
                    添加密钥
                </a-button>
                <span class="detail" @click="handleDetail">详情</span>
            </div>
        </div>
        <div class="tenant-content tenant-table">
            <el-table
                    :data="tableData"
                    height="100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form class="demo-table-expand">
                            <el-form-item label="服务器id：" label-width="120px">
                                <span>{{ props.row.machineId }}</span>
                            </el-form-item>
                            <el-form-item label="密钥：" label-width="120px">
                                <el-input
                                        type="textarea"
                                        style="width: 600px"
                                        :rows="5"
                                        v-model="props.row.license">
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </template>

                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态">
                    <template slot-scope="scope">
                        <el-radio v-model="radio"
                                  :label="scope.row.id"
                                  @change="handleRadioButton(scope.row.id)"
                                  style="color: #00d3f1">
                            {{scope.row.status === 1? '生效中': '未生效'}}
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="开始时间">
                </el-table-column>
                <el-table-column
                        prop="endTime"
                        label="到期时间">
                </el-table-column>
            </el-table>
        </div>


        <el-dialog title="一 添加密钥 一"
                   key="add"
                   width="500px"
                   center
                   :visible.sync="dialogVisible"
        >
            <div style="color: #FFF; margin-bottom: 10px">
                请输入您的密钥
            </div>
            <el-input
                    type="textarea"
                    :rows="5"
                    v-model="licenseInput">
            </el-input>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="formSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog width="400px"
                   title="一 详情 一"
                   center
                   key="getMachine"
                   :visible.sync="detailDialogFormVisible"
        >
            <div style="color: #e3dada">
                服务器id
            </div>
            <div style="color: #adadad">
                {{machineId}}
                <span style="color: #4b83e5; margin-left: 20px; cursor: pointer"
                      v-clipboard:copy="machineId"
                      v-clipboard:success="handleCopyOk"
                      v-clipboard:error="handleCopyErr"
                >复制</span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {getMachineID, addLicense, getLicenseList, enableLicense} from '@/api/authority'

    export default {
        name: "license",
        data() {
            return {
                dialogVisible: false,
                detailDialogFormVisible: false,
                licenseInput: '',
                radio: '',
                machineId: '',
                page: {
                    pageSize: 10,
                    currentPage: 1
                },
                form: {
                    tenantName: '',
                    tenantUserName: '',
                    tenantPassword: '',
                },

                formLabelWidth: '120px',
                tableData: []
            }
        },
        methods:{
            getList() {
                getLicenseList().then((res) => {
                    if(res.data && res.data.success){
                        this.tableData = res.data.data
                        for (let i = 0; i < this.tableData.length; i++) {
                            if(this.tableData[i].status === 1){
                                this.radio = this.tableData[i].id;
                                break;
                            }
                        }
                    }
                })
            },
            formSubmit() {
                if(this.licenseInput === ''){
                    this.$message.error('密钥为空，请重试！');
                    return;
                }
                this.dialogVisible = false;
                addLicense({
                    License: this.licenseInput
                }).then((res) => {
                    if(res.data && res.data.success){
                        this.$message.success("添加成功！");
                        this.getLicList();
                    }else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            handleAdd() {
                this.licenseInput = '';
                this.dialogVisible = true;
            },
            handleCopyOk(){
                this.$message.success('复制成功');
            },
            handleCopyErr(){
                this.$message.error('复制失败');
            },
            handleAddKey() {
                this.keyDialogFormVisible = true;
                this.licenseInput = '';
            },
            handleDetail (){
                this.machineId = '';
                getMachineID().then((res) => {
                    this.detailDialogFormVisible = true;
                    if(res.data && res.data.Code === 200){
                        this.machineId = res.data.Msg;
                    }else {
                        this.machineId = "未找到服务器id！"
                    }
                })
            },
            handleRadioButton (id){
                enableLicense({
                    id: id
                }).then((res) => {
                    if(res.data && res.data.success){
                        this.$message.success("启用成功！");
                        this.getLicList();
                    }else {
                        this.$message.error("启用失败！");
                    }
                })
            },
        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped>
.detail{
    color: #009df1;
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer
}
</style>
